<template>
  <div class="styleList">
    <div class="styleMusicTop">
      <div class="title">为你精选的宝藏歌曲</div>
      <div class="more">
        <svg class="icon">
          <use xlink:href="#icon-24gf-play"></use>
        </svg>
      </div>
    </div>
    <div class="styleMusicContent">
      <!-- <van-swipe :loop="false" width="130" class="van-swipe">
        <van-swipe-item class="van-swipe-item" v-for="item in state.styleMusicList" :key="item">
          <div class="contLeft">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="contRight">
            <span class="songName">{{ item.name }}}</span>
            <span class="singer">{{ item.name }}</span>
          </div>
        </van-swipe-item>
      </van-swipe> -->
      <div class="list-content1">
        <div class="list-content1-c" v-if="styleMusicList">
          <slider :showDot="rec_showDot" :autoPlay="rec_autoPlay" :loop="rec_loop" >
            <div v-for="(items, index1) in styleMusicList" :key="index1"  class="songs_items">
              <songs-wrapper3
                v-for="(item, index) in styleMusicList"
                :key="index"
                :song="item"
                :img="item.picUrl"
                :title="item.name"
                :artists="item.song.artists[0].name"
                class="item"
              ></songs-wrapper3>   
            </div>
          </slider>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
  import { getStyleMusicList } from "@/utils/api/home.js"
  import Slider from '@/components/base/slider/slider.vue'
  import SongsWrapper3 from '@/components/base/songs/SongsWrapper3'

  export default {
    data(){
      return {
        styleMusicList: [],
        rec_showDot:false,
        rec_autoPlay:false,
        rec_loop:false,
      }
    },
    components:{
      Slider,SongsWrapper3
    },
    async mounted(){
      let res = await getStyleMusicList()
      console.log("@@@", res);
      this.styleMusicList = res.data.result
    }
  }
</script>

<style lang="less" scoped>
.styleList {
  width: 100%;
  height: 6rem;
  padding: 0.2rem;
  .styleMusicTop {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2rem;
    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }
  }
  .styleMusicContent {
    width: 100%;
    // height: 3rem;
    .van-swipe-item {
      //   margin-right: 0.14rem;
      display: flex;
      padding-right: 0.2rem;
      // position: relative;
      height: 3.8rem;
      .contLeft {
        // width: 60%;
        height: 2.6rem;
        // position: relative;
        img {
          width: 70px;
          height: 70px;
          border-radius: 7px;
          // position: absolute;
          // z-index: -1;
        }
      }
      .contRight {
        // width: 60%;
        height: 2.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 0.3rem;
        font-weight: 900;
        color: #fff;
        font-family: "微软雅黑";
        span {
          margin-left: 0.1rem;
        }
      }
    }
  }
} 
.list_content_c{
            width:1350px;
            height:100%;
            .item{
              float:left;
              margin-right:20px;
            }
          }
          .list-content1{
          width:100%;
          height:230px;
          overflow-x :scroll;
          overflow-y : hidden;
          white-space : nowrap;
          // padding-left:10px;
          .list-content1-c{
            height:100%;
            .songs_items{
              float:left;
              height:100%;
              .item{
                float:left;
                margin-bottom:20px;
              }
            }

          }
        }
</style>